<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Graph offline example</title>

    <style type="text/css">
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="../graph.js"></script>
    <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="../graph.css">

    <script type="text/javascript">
        // Called when the Visualization API is loaded.
        function drawVisualization() {
            function functionA(x) {
                return Math.sin(x / 25) * Math.cos(x / 25) * 50 + (Math.random()-0.5) * 10;
            }

            function functionB(x) {
                return Math.sin(x / 50) *50 + Math.cos(x / 7) * 75 + (Math.random()-0.5) * 20 + 20;
            }

            // Create and populate dataset with function A
            var d, i;
            var dataset1 = {
                'label': 'Function A',
                'data': []
            };
            d = new Date(2010, 9, 23, 20, 0, 0);
            for (i = 0; i < 100; i++) {
                dataset1.data.push({
                    'date': new Date(d),
                    'value': functionA(i)
                });
                d.setMinutes(d.getMinutes() + 1);
            }

            // Create and populate dataset with function B
            var dataset2 = {
                'label': 'Function B',
                'data': []
            };
            d = new Date(2010, 9, 23, 20, 0, 0);
            for (i = 0; i < 100; i++) {
                dataset2.data.push({
                    'date': new Date(d),
                    'value': functionB(i)
                });
                d.setMinutes(d.getMinutes() + 1);
            }

            // specify options
            var options = {
                'width':  '100%',
                'height': '350px'
            };

            // Instantiate our graph object.
            var graph = new links.Graph(document.getElementById('mygraph'));

            // Draw our graph with the created data and options
            graph.draw([dataset1, dataset2], options);

            // use the Links event bus (not googles event bus)
            var onRangeChange = function (params) {
                document.getElementById('range').innerHTML =
                        'Visible range from ' + params.start + ' to ' + params.end;
            };
            links.events.addListener(graph, 'rangechange', onRangeChange);
        }
    </script>
</head>

<body onload="drawVisualization();">
<h1>Graph offline example</h1>
<p>
    This demo is almost identical to <a href="example01_basis.html">example01_basis.html</a>,
    except that this example uses a JSON Table instead of a Google DataTable.
    Not needing the Google JSAPI enables offline usage of the Graph.
</p>

<div id="mygraph"></div>

<p id="range"></p>


<div id="info"></div>
</body>
</html>
